```jsx
import { useMachine, normalizeProps, Key } from "@zag-js/solid"
import * as toast from "@zag-js/toast"
import {
  createMemo,
  createUniqueId,
  createSignal,
  createContext,
  useContext,
  For,
} from "solid-js"

// 1. Create the toast store
const toaster = toast.createStore({
  placement: "top-end",
  overlap: true,
})

// 2. Design the toast component
function Toast(props) {
  const machineProps = createMemo(() => ({
    ...props.toast(),
    parent: props.parent,
    index: props.index(),
  }))
  const service = useMachine(toast.machine, machineProps)
  const api = createMemo(() => toast.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <h3 {...api().getTitleProps()}>{api().title}</h3>
      <p {...api().getDescriptionProps()}>{api().description}</p>
      <button onClick={api().dismiss}>Close</button>
    </div>
  )
}

// 3. Design the toaster
export function Toaster() {
  const service = useMachine(toast.group.machine, {
    id: createUniqueId(),
    store: toaster,
  })

  const api = createMemo(() => toast.group.connect(service, normalizeProps))

  return (
    <div {...api().getGroupProps()}>
      <Key each={api().getToasts()} by={(toast) => toast.id}>
        {(toast, index) => (
          <Toast toast={toast} parent={service} index={index} />
        )}
      </Key>
    </div>
  )
}

// 4. Render the toaster in your app
export function App() {
  return (
    <>
      <Toaster />
      <ExampleComponent />
    </>
  )
}

// 5. Within your app
function Demo() {
  return (
    <div>
      <button
        onClick={() => {
          toaster.create({ title: "Hello" })
        }}
      >
        Info toast
      </button>
      <button
        onClick={() => {
          toaster.create({ title: "Data submitted!", type: "success" })
        }}
      >
        Success toast
      </button>
    </div>
  )
}
```
